<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>总奖牌榜</title>
    <link rel="stylesheet" href="https://unpkg.com/vant@2.12/lib/index.css"/>
  <!-- 引入 Vue 和 Vant 的 JS 文件 -->
  <script src="https://unpkg.com/vue@2.6/dist/vue.min.js"></script>
  <script src="https://unpkg.com/vant@2.12/lib/vant.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<style>
  body,html,#app,.list_body{
    margin: 0 auto;
    padding: 0;
    width: 100%;
    height: auto;
    max-width: 450px;
}
.list_body{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
   
}
.bg_head{
    background: url('./images/bg_head.png') no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 370px;
    position: relative;
}
.title{
    width: 204px;
    height: 37px;
    margin-top: 100px;
}
.tit{
    width: 100%;
    height: 40px;
    display: flex;
    flex-direction: row;
    background-color: #e5eaf4;
    justify-content: space-around;

}
.list_con{
    background: url('./images/bg_bottom.png') no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: auto;
    margin-top: -5px;
    display: flex;
    flex-direction: row;
    z-index: 1000;
}
.tit_div{
    height: 100%;
    font-size: 16px;
    color: #222;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
 
}
.tit_div1{
    height: 45px;
    color: #333;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
   text-align: center;
    white-space: wrap;
    font-size: 12px;
}
.jin{
    width: 34px;
    height: 42px;
    position: absolute;
    top: 5px;
    left: 22px;
}
.myul{
    margin: 0;
    padding: 0;
    list-style: none;
    width: calc(100% - 20px);
    height: 500px;
    margin-top: -10px;
    background-color: #fff;
    border-radius: 10px;
    overflow-y: scroll;
    margin-left: 10px;
    margin-bottom: 30px;
    padding-top: 20px;
   
}
.myli{
    width: 100%;
    height: 45px;
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #222;
    border-bottom: 1px solid #eee;
    justify-content: space-around;
}
.myli:nth-child(2n+1){
    background-color: #e5eaf4;
}
.gold{
    display: inline-block;
    position: absolute;
    left: 0;
    top:4px
}
.gold_box{
    height: 30px;
    width: 52px;
    position: relative;
}
.time{
    width: 100%;
    position: absolute;
    bottom: 20px;
    right: 10px;
    color: #fed8ad;
    font-size: 18px;
    font-weight: bold;
    text-align: right;
    letter-spacing: 3px;
}
</style>
<body>
 <div id="app">
      <div class="list_body">
             <div class="bg_head">
                <div class="time">数据截至11月5日</div>
             </div> 
             <div class="list_con" >
                   <ul class="myul">
                    <div class="tit">
                        <div class="tit_div" style="width:150px;" >学校</div>
                        <div class="tit_div" style="width: 52px;">
                            <div class="gold_box">
                                <span class="gold">金牌</span> <img src="./images/jin.png" class="jin" alt="">
                            </div>
                        </div>
                        <div class="tit_div"style="width: 52px;">
                            <div class="gold_box">
                                <span class="gold">银牌</span> <img src="./images/yin.png" class="jin" alt="">
                            </div>
                        </div>
                        <div class="tit_div" style="width: 52px;">
                            <div class="gold_box">
                                <span class="gold">铜牌</span> <img src="./images/tong.png" class="jin" alt="">
                            </div>
                        </div>
                        <div class="tit_div" style="width: 35px;">总数</div>
                     </div>
                        <li class="myli" v-for="(item,index) in list" :key="item+index">
                            <div class="tit_div1" style="width:150px;text-align: center;" >{{item.school}}</div>
                            <div class="tit_div1" style="width:52px;text-align: center;" >{{item.gold_number}}</div>
                            <div class="tit_div1" style="width:52px;text-align: center;" >{{item.silver_number}}</div>
                            <div class="tit_div1" style="width:52px;text-align: center;" >{{item.bronze_number}}</div>
                            <div class="tit_div1" style="width:35px;text-align: center;" >{{item.gold_number+item.silver_number+item.bronze_number}}</div>
                        </li>
                   </ul>
             </div>
      </div>
 </div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data(){
            return{
                 list:[]
                }
        },
        created(){   
           this.getList()
        },
        methods:{
          getList(){
            axios.get('https://project.hangzhou.com.cn/api/v1/2023medals').then((res)=>{
                this.list = res.data.data
            })
          }
        }
    });
</script>
